<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()
            + "://" + request.getServerName()
            + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>焦点学苑</title>
    <link rel="stylesheet" href="<%=basePath%>css/base.css">
    <link rel="stylesheet" href="<%=basePath%>css/style.css">
    <script src="<%=basePath%>js/jquery-1.11.1.min.js"></script>
    <!--字体样式-->
    <link rel="stylesheet" href="<%=basePath%>dianzan/iconfont/iconfont.css" type="text/css"/>
    <!--必要样式-->
    <link rel="stylesheet" href="<%=basePath%>dianzan/css/index.css" type="text/css"/>
    <link rel="stylesheet" href="<%=basePath%>dianzan/css/animate.css" type="text/css"/>
</head>

<body>
<div class="head-box">
    <div class="head wrap">
        <div class="logo fl"><a href=""><img src="<%=basePath%>images/logo.png"></a></div>
        <div class="head-right fr">
            <div class="head-a fr">
                <div class="hgt fl"><img src="<%=basePath%>images/hgt.png">
                    <div class="hgt-top">
                        <input type="text" class="hgt-text">
                    </div>
                </div>
                <div class="head-a1 fl"><a href=""><img src="<%=basePath%>images/tb-a.png"></a></div>
                <div class="head-a1 fl"><a href=""><img src="<%=basePath%>images/tb-b.png"></a></div>
                <div class="head-a3 login-click fl">登录</div>
                <div class="head-a4 reg-click fl">注册</div>

            </div>
            <div class="clearfix"></div>
            <jsp:include page="foot2.jsp"/>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

<div class="content">
    <div class="wrap">
        <div class="tsm-height"></div>
        <div class="post">
            <div class="post-fl fl">
                <input hidden id="tieziId" value="${searchTieziSuccess.id} ">
                <div class="post-a1">帖子标签${searchTieziSuccess.fname}</div>
                <div class="post-a2">
                    发帖人：${searchTieziSuccess.userEntity.loginId}<span><br>
                    帖子类型:${searchTieziSuccess.type}<br>
                    发布时间：${searchTieziSuccess.ftime}</span>
                </div>
                <div class="post-a4" style="margin-bottom: 10px"><img src="<%=basePath%>upload/tiezi_details_photo.png">
                </div>
                <div class="post-b">
                    <p style="clear: both;width: 600px;margin-top: 10px">帖子内容：${searchTieziSuccess.fmain}</p>
                </div>
                <div class="opera" style="margin-left: 260px">
            <span id="btn" onclick="SaveDianZan('${searchTieziSuccess.id}')">
                <i class="iconfont">&#xe602;</i> 顶
            </span>
                </div>
                <div class="det-b">
                    <div class="det-title"><img src="<%=basePath%>images/cou-b1.jpg">在线评论</div>
                    <div class="det-b1">
                        <textarea class="det-area post-area" id="pinglun"></textarea>
                        <div class="det-b2"></div>
                    </div>
                    <div class="det-b3"><input type="button" class="det-btn" value="发表" onclick="postPinglun()"></div>
                </div>

                <div class="skt">
                    <div class="skt-title">
                        <span class="skt-cut">默认评论</span><em>|</em><span>最新评论</span>
                    </div>
                    <div class="skt-tab">
                        <div class="skt-btm">
                            <ul class="skt-ul" id="yibupinglun">
                                <c:forEach items="${requestScope.searchAllPinlun}" var="allPL">
                                    <li>
                                        <div class="skt-a1"><img src="<%=basePath%>upload/det-tx.jpg">
                                                ${allPL.userEntity.name}
                                        </div>
                                        <div class="skt-a1"><img src="<%=basePath%>upload/det-tx.jpg">${allPL.ftime}
                                            <div class="menu"><a href=""><img src="<%=basePath%>images/menu.jpg"></a>
                                            </div>
                                        </div>
                                        <div class="skt-a2">${allPL.fmain}</div>
                                        <div class="skt-a3"><a href=""><img src="<%=basePath%>upload/det-b.jpg">我要点评</a>
                                            <div class="menu-a"><img src="<%=basePath%>images/menu-a1.jpg">0
                                                <span><img src="<%=basePath%>images/menu-a2.jpg">0</span></div>
                                        </div>
                                    </li>
                                </c:forEach>
                            </ul>
                        </div>
                    </div>
                </div>
            </div><!--post-fl-->
            <div class="post-fr fr">
                <div class="art-a"><a href=""><img src="<%=basePath%>upload/tiezi-a.png"></a></div>
                <div class="post-t"><a href=""><img src="<%=basePath%>upload/post-a3.png"></a></div>
                <div class="post-y">
                    <div class="post-y1"><img src="<%=basePath%>images/cou-b1.jpg">推荐帖子</div>
                    <ul>
                        <a href="">
                            <li>
                                <div class="post-y2"><img src="<%=basePath%>upload/post-a4.png"></div>
                                <div class="post-y3">java三大特性</div>

                            </li>
                        </a>
                        <a href="">
                            <li>
                                <div class="post-y2"><img src="<%=basePath%>upload/post-a4.png"></div>
                                <div class="post-y3">在Linux服务器上部署项目</div>
                            </li>
                        </a>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="/foot/foot.jsp"></jsp:include>


<!--登录注册弹窗-->
<div class="mask"></div>
<div class="login">
    <div class="login-title">
        <div class="login-a">登录</div>
        <div class="login-b"></div>
        <div class="login-c close">x</div>
    </div>
    <div class="login-btm">
        <div class="login-d"><input type="text" class="login-text" placeholder="注册时填写的邮箱"></div>
        <div class="login-d"><input type="password" class="login-pas" placeholder="密码"></div>
        <div class="login-d"><input type="button" class="login-btn" placeholder="登录"></div>
        <div class="login-f">
            <a href="">忘记密码</a>
            <span>还没有焦点账号?><a href="javascript:;" class="reg-href">点击注册</a></span>
        </div>
    </div>
</div>

<div class="reg">
    <div class="login-title">
        <div class="login-a">注册</div>
        <div class="login-b"></div>
        <div class="login-c close">x</div>
    </div>
    <div class="login-btm">
        <div class="login-d"><input type="text" class="login-text" placeholder="邮箱/手机号"></div>
        <div class="login-d"><input type="password" class="login-pas" placeholder="密码"></div>
        <div class="login-d"><input type="button" class="login-btn" placeholder="注册"></div>
        <div class="login-f">
            <a href="">忘记密码</a>
        </div>
    </div>
</div>


<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/Action.js"></script>
<script>
    $(".skt-title span").click(function () {
        $(this).addClass("skt-cut").siblings().removeClass("skt-cut"),
                $(".skt-tab .skt-btm").hide().eq($(".skt-title span").index(this)).show()
    })
</script>


<%--点赞--%>
<script>
    function SaveDianZan(a) {
        $.getJSON("<%=basePath%>TestSX/dianzan", {dianZan: a}, function (result) {
            alert(result.code);
        })
    }
</script>


<%--发表评论--%>
<script>
    function postPinglun() {
        var $tieziId = $("#tieziId").val();
        var $pinglun = $("#pinglun").val();
        $.getJSON("<%=basePath%>TestSX/tiezaiPinglun", {
            tieziid: $tieziId,
            pinglunContent: $pinglun
        }, function (result) {
            $("#yibupinglun").html("");
            for (var i = 0; i < result.length; i++) {
                $("#yibupinglun").append(
                        "<li>" +
                        "<div class='skt-a1'>" + "<img src='/upload/det-tx.jpg'>" +
                        result[i].UserEntity.name +
                        "<div class='menu'><a href=''>" +
                        "</a></div></div>" +
                        "<div class='skt-a2'>" + result[i].fmain + "</div>" +
                        "<span style='float: right'>" + "发表时间：" + result[i].ftime + "</span>" +
                        "</li>"
                )
            }
        });
    }
</script>


<script type="text/javascript">
    (function ($) {
        $.extend({
            tipsBox: function (options) {
                options = $.extend({
                    obj: null,  //jq对象，要在那个html标签上显示
                    str: "+1",  //字符串，要显示的内容;也可以传一段html，如: "<b style='font-family:Microsoft YaHei;'>+1</b>"
                    startSize: "12px",  //动画开始的文字大小
                    endSize: "30px",    //动画结束的文字大小
                    interval: 600,  //动画时间间隔
                    color: "red",    //文字颜色
                    callback: function () {
                    }    //回调函数
                }, options);
                $("body").append("<span class='num'>" + options.str + "</span>");
                var box = $(".num");
                var left = options.obj.offset().left + options.obj.width() / 2;
                var top = options.obj.offset().top - options.obj.height();
                box.css({
                    "position": "absolute",
                    "left": left + "px",
                    "top": top + "px",
                    "z-index": 9999,
                    "font-size": options.startSize,
                    "line-height": options.endSize,
                    "color": options.color
                });
                box.animate({
                    "font-size": options.endSize,
                    "opacity": "0",
                    "top": top - parseInt(options.endSize) + "px"
                }, options.interval, function () {
                    box.remove();
                    options.callback();
                });
            }
        });
    })(jQuery);

    function niceIn(prop) {
        prop.find('i').addClass('niceIn');
        setTimeout(function () {
            prop.find('i').removeClass('niceIn');
        }, 1000);
    }
    $(function () {
        $("#btn").click(function () {
            $.tipsBox({
                obj: $(this),
                str: "+1",
                callback: function () {
                }
            });
            niceIn($(this));
        });
    });
</script>

</body>
</html>

